<template>
	<view>
		<image :src="ApitestUrl+'/home/image/1.png'" class="width-100 height-100 poAb top-0 left-0" mode="widthFix"></image>
		<view class="poRe">
			<view class="col-f text-align-center fontSize-36 fontBold mar-top-36">红包抽奖次数</view>
			<view class="col-f fontBold mar-top-30 fontSize-58 text-align-center">{{may_count}}</view>
			<view class="text-align-center col-f fontSize-26 mar-top-60">通过抽奖提取分红奖励，抽中可立即入账到钱包</view>
			<!-- 九宫格抽奖 -->
			<view class="height-100 container poRe">
				<view class="width-100 height-100 poAb container1">

				</view>
				<!-- <image src="/static/image/jiugongge.png" class="width-100 height-100" mode=""></image> -->
				<view class="container_circle" v-for="(v,i) in  circleList" :key="i"
					:style="{'top':v.topCircle+'rpx','left':v.leftCircle+'rpx','background-color':(i%2 ==0)?oneCircleColor:twoCircleColor}">
				</view>
				<view class="container_content">
					<view class="content_out text-center text-align-center align-items display flex-wrap poRe"
						v-for="(v,i) in prizeList" :key="i" :style="{'top':v.topAward+'rpx','left':v.leftAward+'rpx',		 	
		 	'background-size':' 400%',
		 	'animation': 'animatebox 4s linear infinite'
		 	}">
						<view class="content_btn width-100 height-100 display-ce align-items radius-20" @tap="handleStart"
							v-if="i==4"> <text>点 击 <br> 抽 奖</text></view>
						<view class="poAb width-100 height-100" style="background-color: black;opacity: 0.1;"
							v-if="color[i]!=1&&i!=4"></view>
						<view class="fontSize-30 text-clamp-1 col-f width-100 poRe mar-top-30" style="z-index: 99;width: 128rpx;margin-left: auto;margin-right: auto;"
							v-if="i!=4"><text class="fontSize-24">￥</text>{{v.imgList1.key}}</view>
						<!-- <image class="award_image" :src="v.imgList1.image" mode="aspectFill"></image> -->
						<image src="/static/img/hongbao.png" class="poAb hongbao_bg" mode="" v-if="i!=4"></image>
					</view>

				</view>
			</view>
			<view class="text-align-center mar-top-60 col-f fontSize-36 fontBold">
				最新分红奖励
			</view>
			<view class=" pad-lr-30 jilu_value poRe">
				<view class="width-100 height-100 poRe" style="width: 100%;">
					<swiper :autoplay="true" :interval="1000" :duration="1000" class="swiper" @change="changeswiper"
						vertical circular :display-multiple-items='5'>
						<swiper-item class="swiperitrm" style="line-height: 70rpx" v-for="item in rand_log" :key="item">
							<view class="display-sb align-items">
								<text>{{item.date}}</text>
								<text>{{item.mobile}}</text>
								<text>￥{{item.money}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="display-ce align-items mar-top-60 col-f fontSize-26">
				<view class="display-ce align-items" @click="gorecord">
				<text>查看抽奖记录 </text>
				<image src="/static/img/icon_baijiantou.png" class="proudct-item-icon-4 ml16" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 提示框 -->
		<tm-overlay v-model:show="showWin" contentAnimation>
			<view @click.stop="">
				<view class="popup_view radius-20 bgfff text-align-center pad-tb-40">
					<view class="fontSize-40">提示</view>
					<view class="mar-top-40 col-6">亲，请先升级为代理！</view>
					<view class="col-f text-align-center qry_btn radius-10" @click="showWin = false">
						确认
					</view>
				</view>
			</view>
		</tm-overlay>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { computed, onMounted, ref } from 'vue';
	import {redPacketPage,clickPrize,ApitestUrl} from '../../utils/api';
	let circleList = ref([])
	let oneCircleColor = ref('#FBED0A') // 圆圈颜色1
	let twoCircleColor = ref('#FFFFFF')  // 圆圈颜色2
	let prizeList = ref([]) // 奖品数组
	let color = ref([0, 0, 0, 0, 0, 0, 0, 0, 0])
	let indexSelect = ref(0) //被选中的奖品index
	let isRunning = ref(false)  //是否正在抽奖
	let isRunning1 = ref(false)
	let imgList = ref([])
	let info = ref({ draw_number: 1000 })
	
	const may_count = ref(0)//抽奖次数
	const showWin = ref(false)//提示弹窗
	const rand_log = ref([])//记录
	onLoad(() => {
		
	})
	onShow(()=>{
		_redPacketPage()
	})
	//页面数据
	const _redPacketPage =() =>{
		 redPacketPage().then(async res=>{
			if(res.code==1){
				imgList.value = res.data.prize
				may_count.value = res.data.may_count
				rand_log.value = res.data.rand_log
				imgList.value.splice(4,0,{key:''})
				List()
			}
		})
	}
	const List = () => {
		// setTimeout(()=>{

		let prizeList1 = [];
		//间距,怎么顺眼怎么设置吧.
		let topAward = 18;
		let leftAward = 18;
		let topAward1 = 18;
		let leftAward1 = 18;
		let topAward2 = 18;
		let leftAward2 = 18;
		for (let j = 0; j < 9; j++) {
			if (j == 0) {
				topAward = 18;
				leftAward = 18;
			} else if (j < 3) {
				topAward = topAward;
				//166.6666是宽.15是间距.下同
				leftAward = leftAward + 180 + 18;
			} else if (j < 6) {
				leftAward = leftAward1;
				leftAward1 = leftAward1 + 180 + 18;
				//150是高,15是间距,下同
				topAward1 = topAward1;
				topAward = topAward1 + 194;
			} else if (j < 9) {
				leftAward = leftAward2;
				leftAward2 = leftAward2 + 180 + 18;
				topAward2 = topAward2;
				topAward = topAward2 + 390;
			}
			let imgList1 = imgList.value[j];
			prizeList1.push({
				topAward,
				leftAward,
				imgList1
			});
		}
		prizeList.value = prizeList1;
	}

	onMounted(() => {
		//圆点设置
		let topCircle = 7.5;
		let leftCircle = 1;
		let circleList1 = [];
		for (let i = 0; i < 36; i++) {
			if (i == 0) {
				topCircle = 10;
				leftCircle = 20;
			} else if (i < 9) {
				topCircle = 10;
				leftCircle += 70;
			} else if (i == 9) {
				topCircle = 20;
				leftCircle = 646;
			} else if (i < 18) {
				topCircle += 70;
				leftCircle = 670;
			} else if (i == 18) {
				topCircle = 640;
				leftCircle = 640;
			} else if (i < 27) {
				topCircle = 650;
				leftCircle -= 70;
			} else if (i == 27) {
				topCircle = 630;
				leftCircle = 14;
			} else if (i < 36) {
				topCircle -= 70;
				leftCircle = 10;
			} else {
				return;
			}
			circleList1.push({
				topCircle,
				leftCircle
			});
		}
		circleList.value = circleList1;
		//圆点闪烁
		setInterval(() => {
			if (oneCircleColor.value == '#FBED0A') {
				oneCircleColor.value = '#FCFFD4';
				twoCircleColor.value = '#FBED0A';
			} else {
				oneCircleColor.value = '#FBED0A';
				twoCircleColor.value = '#FCFFD4';
			}
		}, 500)
	})

	var interval = null;
	let intime = ref(100);
	const handleStart = () => {
		if (isRunning.value) return
		isRunning.value = true;
		isRunning1.value = true
		setTimeout(() => {
			isRunning1.value = false
		}, 80)
		clickPrize().then(res=>{
			if(res.code==1){
		imgList.value.forEach((item, index1) => {
			if (item.key == res.data.money) {
				if (may_count.value > 0) {
					may_count.value--
				} else {
					may_count.value = 0
				}
				indexSelect.value = index1; //位置 //////将后端反的id替换
				// prize.value = imgList.value[arr[a]].b //奖品名字
				// prizeimg.valeue = imgList.value[arr[a]].a //奖品图片
				clearInterval(interval);
				var index = 0;
				//循环设置每一项的背景图
				interval = setInterval(function () {
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 8) {
						index = 0;
					}
					c[index] = 1;
					color.value = c;
					if (index == 4) {
						index += 2;
					} else {
						index++
					}
					console.log(index, 77)
				}, intime.value);
				console.log(1111111111)
				stop(indexSelect.value, imgList.value[index1].key, 1);
				throw new Error('')
				return
			}
		})
			}else if(res.code==3){
				showWin.value = true
			}else{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		})
	}
	// 停止
	const stop = (which, name, goods_type) => {
		//清空计数器
		clearInterval(interval);
		//初始化当前位置
		var current = -1;
		var color1 = color.value;
		for (var i = 0; i < color1.length; i++) {
			if (color1[i] == 1 && i != 4) {
				current = i;
			}
		}
		//下标从1开始
		var index = current + 1;
		stopLuck(which, index, intime.value, 10, name, goods_type);
	}
	const stopLuck = (which, index, time, splittime, name, goods_type) => {
		//值越大出现中奖结果后减速时间越长
		var color1 = color.value;
		setTimeout(function () {
			//重置前一个位置
			var c = [0, 0, 0, 0, 0, 0, 0, 0, 0];
			if (index > 8) {
				index = 0;
			}
			//当前位置为选中状态
			if (index == 4) {
				c[4] = 0
			} else {
				c[index] = 1;
			}
			color.value = c;
			//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
			//直到旋转至中奖位置
			if (time < 400 || index != which) {
				//越来越慢
				splittime++;
				time += splittime;
				//当前位置+1
				if (index == 0) {
					index = 1
				} else if (index == 1) {
					index = 2
				}
				else if (index == 2) {
					index = 5
				}
				else if (index == 5) {
					index = 8
				}
				else if (index == 8) {
					index = 7
				}
				else if (index == 7) {
					index = 6
				}
				else if (index == 6) {
					index = 3
				}
				else if (index == 3) {
					index = 0
				}

				// if(index==4){
				// 	index+=1
				// }else{
				// index++;
				// }
				stopLuck(which, index, time, splittime, name, goods_type);
			} else {
				// console.log(1111)
				// console.log(index)
				if (goods_type == 1) {
					uni.showModal({
						title: "恭喜中奖",
						content: `￥${name}`,
						success: res => {
							isRunning.value = false
						}
					})
				} else {
					uni.showToast({
						title: '很遗憾,未中奖',
						icon: 'none'
					})
					isRunning.value = false
				}
				indexSelect.value = index
			}
		}, time);
	}
	const gorecord =() =>{
		uni.navigateTo({
			url:'/indexpages/record/record'
		})
	}
</script>

<style lang="scss">
	@import 'index.scss';
</style>